<template>
  <div id="app">
    <h2>Draggable List Example</h2>
    <draggable-list :list="items" @sort-end="handleSortEnd"></draggable-list>
  </div>
</template>

<script>
import DraggableList from '@/components/DraggableList.vue'

export default {
  name: 'Sort',
  components: {
    DraggableList
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
        // ...更多项目...
      ]
    }
  },
  methods: {
    handleSortEnd({ newIndex, oldIndex }) {
      console.log(`Item moved from ${oldIndex} to ${newIndex}`)
      // 在这里，你可以发送请求到服务器更新项目顺序，或者做其他事情。
    }
  }
}
</script>
